<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画animation</title>
    <style>
        /* 定义动画 */
        @keyframes move {
            0% {
                transform: translateX(0px);
            }
            50% {
                transform: translateX(300px);
            }
            100% {
                transform: translateX(0px);
            }
        }
         .donghua {
             width: 100px;
             height: 100px;
             background-color: aquamarine;
             /* 调用动画 */
             animation-name: move;
             /* 持续时间 */
             animation-duration: 2s;
         }
         @keyframes move2 {
             0% {
                 /* 起始位置无变化 可以空着不写 */
                transform: translate(0, 0);
             }
             25% {
                transform: translate(300px, 0);
             }
             50% {
                transform: translate(300px, 200px);
             }
             75% {
                transform: translate(0, 200px);
             }
             100% {
                transform: translate(0, 0);
             }
         }
         .xulie {
             width: 80px;
             height: 80px;
             background-color: brown;
             animation-name: move2;
             animation-duration: 4s;
         }

         /* 常用属性 */
         @keyframes move3 {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(300px);
            }
         }
         .shuxing {
             width: 120px;
             height: 120px;
             background-color: burlywood;
             animation-name: move3;
             animation-duration: 3s;
             /* 规定动画的速度曲线 默认ease */
             animation-timing-function: ease;
             /* 延迟 何时开始 默认0 */
             animation-delay: 1s;
             /* 默认重复次数 默认1 无限infinite */
             animation-iteration-count: infinite;
             /* 方向（是否反向播放） 默认normal不反向 alternate反向 */
             animation-direction: alternate;
         }
         .shuxing1 {
             width: 120px;
             height: 120px;
             background-color: burlywood;
             animation-name: move3;
             animation-duration: 3s;
             /* 规定动画的速度曲线 默认ease 匀速linear */
             animation-timing-function: ease;
             /* 延迟 何时开始 默认0 */
             animation-delay: 1s;
            /* 结束状态 默认backwards回到起始状态 forwards保持结束状态 */
            animation-fill-mode: forwards;
         }
         div:hover {
             /* 鼠标悬停 动画停止 鼠标离开 动画继续 */
             /* 默认running */
             animation-play-state: paused;
         }
         .jianxie {
             width: 50px;
             height: 50px;
             background-color: chartreuse;
             /* 名称name 持续时间duration 运动曲线timing-function
             何时开始delay 重复次数iteration-count
             方向decoration 结束状态fill-mode */
             /* play-state要单独写 */
             animation: move3 2s linear 0.5s 1 alternate forwards;
         }

         .map {
             position: relative;
             width: 300px;
             height: 300px;
             background-color: #ccc;
         }
         .dotted {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             width: 4px;
             height: 4px;
             background-color: #009dfd;
             border-radius: 50%;
         }
         .city div[class^="pulse"] {
             /* 水平垂直居中 */
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             width: 8px;
             height: 8px;
             box-shadow: 0 0 12px #009dfd;
             border-radius: 50%;
             animation: pulse 1.5s linear infinite;
         }
         .city div.pulse2 {
             animation-delay: 0.5s;
         }
         .city div.pulse3 {
             animation-delay: 1s;
         }
         @keyframes pulse {
             0% {}
             70% {
                 /* 不用scale 因为阴影会变大 */
                 width: 40px;
                 height: 40px;
                 /* 透明度 */
                 opacity: 1;
             }
             100% {
                 width: 60px;
                 height: 60px;
                 /* 不透明 */
                 opacity: 0;
             }
         }
    </style>
</head>
<body>
    <div class="donghua"></div>
    <div class="xulie"></div>
    <div class="shuxing"></div>
    <div class="shuxing1"></div>
    <div class="jianxie"></div>

    <!-- 案例 -->
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>
</html>